<template>
    <div class="home-wrapper">
        <div class="home-header flex_row">
            <div class="input-wrapper flex_row">
                <input v-model="keyword" class="tip-input" type="text" placeholder="请输入搜索关键字、订单名称等" @return="inputReturned" return-key-type="search">
                <image class="search-icon" :src="imgPath('search.png')" @click="inputReturned"></image>
            </div>
            <image class="message" :src="imgPath('notice.png')" @click="jumpTo('/message')"></image>
        </div>
        <scroller style="padding-bottom: 120px;" show-scrollbar="false">
            <slider class="slider" interval="3000" auto-play="true" v-if="imageList.length > 0">
                <div class="frame" v-for="(item, index) in imageList" :key="index" @click="toNewAdvice">
                    <image class="banner" resize="cover" :src="item.picture"></image>
                </div>
                <indicator class="indicator"></indicator>
            </slider>
            <div class="notice-wrapper border_bottom_ebebeb flex_row" v-if="noticeList.length > 0">
                <text class="notice-title">最新公告</text>
                <text class="notice-content">{{noticeList[noticeIndex].title}}</text>
            </div>
            <!--新品推荐-->
            <div class="endSoon-wrapper">
                <!--v-if="endSoonList && endSoonList.length > 0"-->
                <div class="endSoon-top space_between flex_row align_center">
                    <text class="endSoon-title fs_28">新品推荐</text>
                    <text class="col_ff0f37 fs_24" @click="toNewAdvice">查看全部>></text>
                </div>
                <div class="flex_row">
                    <div class="flex_row endSoon-item" :class="[index !== newestList.length - 1 ? 'margin_right_24' : '']" v-for="(item, index) in newestList" :key="index" @click="toGoodsDetail(item)">
                        <image class="endSoon-image" :src="item.topPicture ? item.topPicture : imgPath('default_image.png')"></image>
                        <div class="endSoon-content">
                            <text class="endSoon-word">{{item.goodsName}}</text>
                            <text class="endSoon-number">￥{{item.discountPrice ? item.discountPrice : item.price}}{{'/' + item.priceUnit}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ad-wrapper">
                <image class="ad-image" :src="imgPath('ad_home.png')"></image>
            </div>
            <!--行业大咖-->
            <div class="endSoon-wrapper">
                <div class="endSoon-top space_between flex_row align_center">
                    <text class="endSoon-title fs_28">行业大咖</text>
                    <text class="col_ff0f37 fs_24" @click="jumpTo('/market/platformMaster')">查看全部>></text>
                </div>
                <div class="designer-type flex_row">
                    <div class="popular-designer">
                        <image class="designer-image" :src="imgPath('designer_pic1.png')"></image>
                        <div class="designer-mask flex_row">
                            <image class="popular-designer-image" :src="imgPath('popular_designer.png')"></image>
                            <text class="popular-title margin_top_12">——&nbsp;&nbsp;人气大咖设计师&nbsp;&nbsp;——</text>
                        </div>
                    </div>
                    <div class="flex_row" style="width: 258px;flex-wrap: wrap;">
                        <div class="senior-designer">
                            <image class="designer-image" :src="imgPath('designer_pic2.png')"></image>
                            <div class="designer-mask flex_row align_center">
                                <text class="popular-title">—&nbsp;&nbsp;世界级设计师&nbsp;&nbsp;—</text>
                            </div>
                        </div>
                        <div class="senior-designer" style="margin-top: 22px;">
                            <image class="designer-image" :src="imgPath('designer_pic3.png')"></image>
                            <div class="designer-mask flex_row align_center">
                                <text class="popular-title">—&nbsp;&nbsp;高级打版师&nbsp;&nbsp;—</text>
                            </div>
                        </div>
                    </div>
                </div>
                <slider class="designer-slider">
                    <div class="designer-list flex_row" v-for="(item, index) in masterList" :key="index">
                        <div class="designer-item flex_row" v-for="(items, indexs) in item" :key="indexs">
                            <image class="designer-avatar" resize="cover" :src="imgPath(items.src)"></image>
                            <!--<image class="designer-avatar" resize="cover" :src="items.headPortraitUrl ? items.headPortraitUrl : imgPath('default_avatar.png')"></image>-->
                            <!--<text class="designer-level">资深设计师</text>-->
                            <text class="designer-name">{{items.name}}</text>
                        </div>
                    </div>
                    <indicator class="indicators"></indicator>
                </slider>
            </div>
            <div class="bar"></div>
            <!--品牌商家-->
            <div class="endSoon-wrapper">
                <div class="endSoon-top space_between flex_row align_center">
                    <text class="endSoon-title fs_28">品牌商家</text>
                    <text class="col_ff0f37 fs_24" @click="jumpTo('/store')">查看全部>></text>
                </div>
                <div class="store-list flex_row">
                    <image v-for="(item, index) in 6" :key="index" class="store-item" :src="imgPath('store_' + (index + 1) + '.jpg')"></image>
                </div>
            </div>
        </scroller>
        <NavBottom></NavBottom>
        <Modal :show="showModal" :word="modalWord" type="1"></Modal>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask" @wxcLoadingMaskClicked="maskClicked"></wxc-loading>
    </div>
</template>

<script>
import { WxcLoading } from 'weex-ui'
import NavBottom from '@/components/navBottom'
import Modal from '@/components/modal'
// import { validatenull } from '@/util/validate'
import { queryNoticeList, querySliderList, queryEndsoonList } from '@/api/home'
import { storeIndex, storeShopList } from '@/api/store'
// import { getMasterList } from '@/api/market'
// const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'home',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      showModal: false, // 弹窗显示
      keyword: '', // 搜索词
      modalWord: '', // 弹窗提示
      storeList: [], // 品牌商家列表
      imageList: [], // 轮播图
      newestList: [], // 新品推荐
      masterList: [
        [
          {
            src: 'master_1.jpg',
            name: '老郑哥'
          },
          {
            src: 'master_2.png',
            name: 'Iraida Kounina'
          },
          {
            src: 'master_3.jpg',
            name: '周捷博士'
          },
          {
            src: 'master_4.png',
            name: 'Krisa (Kuffel) Kuhn'
          }
        ],
        [
          {
            src: 'master_5.jpg',
            name: '刘红生'
          },
          {
            src: 'master_6.png',
            name: 'Leila Powell'
          },
          {
            src: 'master_7.jpg',
            name: '姜凯'
          },
          {
            src: 'master_8.png',
            name: 'Najib Award'
          }
        ],
        [
          {
            src: 'master_9.jpg',
            name: '陈陈'
          },
          {
            src: 'master_10.png',
            name: 'Tahnee McIlwraith'
          },
          {
            src: 'master_11.jpg',
            name: 'Bill'
          }
        ]
      ], // 大师列表
      endSoonList: [], // 即将结单列表
      itemList: [
        {
          name: '找布料',
          type: '8'
        },
        {
          name: '找辅料',
          type: '9'
        },
        {
          name: '找工厂',
          type: '10'
        },
        {
          name: '找订单',
          type: '11'
        },
        {
          name: '找高人',
          type: '12'
        }
      ], // 服务类型
      itemIndex: 0, // 类型下标
      pageNo: 1,
      pageSize: 6,
      taskDataList: [], // 任务数据列表
      hasMore: true, // 是否还有数据
      askType: ['大货', '样品'], // 求购类型
      childrenType: ['现货', '定制'], // 子类型列表
      noticeList: [], // 公告列表
      noticeIndex: 0, // 当前显示公告下标
      noticeTimer: null // 公告定时器
    }
  },
  created () {
    const that = this
    let obj = that.$route.query.obj // 获取传参
    if (obj && obj.success) {
      that.modalWord = obj.word
      that.showModal = true
      setTimeout(() => {
        that.showModal = false
      }, 2000)
    }
    storage.removeItem('storeIndex', event => {})
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(queryNoticeList, {}, (res) => {
      that.noticeList = res.data
      that.loadingShow = false
      if (that.noticeList.length > 0) {
        that.noticeTimer = setInterval(() => {
          if (that.noticeIndex < that.noticeList.length - 1) {
            that.noticeIndex++
          } else {
            that.noticeIndex = 0
          }
        }, 3000)
      }
    })
    that.loadingShow = true
    that.$api.get(querySliderList + '4', {}, (res) => {
      for (let i in res.data) {
        that.imageList = res.data[i]
      }
      that.loadingShow = false
    })
    that.loadingShow = true
    that.$api.get(queryEndsoonList, {
      pageNo: 1,
      pageSize: 10
    }, (res) => {
      let list = res.data.records
      if (list.length > 3) {
        that.endSoonList = list.slice(0, 3)
      } else {
        that.endSoonList = list
      }
      that.loadingShow = false
    })
    // that.loadingShow = true
    // that.$api.get(getMasterList + '1/10', {}, (res) => {
    //   that.loadingShow = false
    //   let list = res.data.records
    //   for (let i = 0, len = list.length; i < len; i += 4) {
    //     that.masterList.push(list.slice(i, i + 4))
    //   }
    // }, () => {
    //   that.loadingShow = false
    // })
    that.loadingShow = true
    that.$api.get(storeShopList, {
      pageNo: 1,
      pageSize: 10
    }, (res) => {
      let list = res.data.records
      if (list.length > 6) {
        that.storeList = list.slice(0, 6)
      } else {
        that.storeList = list
      }
      that.loadingShow = false
    })
    that.loadingShow = true
    that.$api.get(storeIndex + '/1/10', {}, function (res) {
      let list = res.data.newestList.records // 最新
      if (list.length > 3) {
        that.newestList = list.splice(0, 3)
      } else {
        that.newestList = list
      }
      // that.newestList = res.data.newestList.records
      that.loadingShow = false
    }, function () {
      that.loadingShow = false
    })
  },
  // computed: {
  //   indicatorStyle () {
  //     const that = this
  //     let obj = {}
  //     obj.width = 16 * that.imageList.length + 10 * (that.imageList.length - 1)
  //     obj.left = (750 - obj.width) / 2
  //     return obj
  //   },
  //   indicatorStyles () {
  //     const that = this
  //     let obj = {}
  //     obj.width = 16 * that.imageList.length + 10 * (that.imageList.length - 1)
  //     // obj.width = 16 * 3 + 10 * (3 - 1)
  //     obj.left = (702 - obj.width) / 2
  //     return obj
  //   }
  // },
  methods: {
    toGoodsDetail (item) { // 商品详情
      this.$router.push({path: 'store/storeDetail', query: {goodsId: item.id}})
    },
    toStoreDetail (item) { // 店铺详情
      const that = this
      that.$router.push({path: '/store/storeInfo', query: {shopsId: item.id}})
    },
    toNewAdvice () { // 活动专区
      const that = this
      storage.setItem('storeIndex', 1, (event) => {
        if (event.result === 'success') {
          that.$router.push('/store')
        }
      })
    },
    maskClicked () {
      return false
    },
    inputReturned () { // 搜索确定
      const that = this
      that.$router.push({
        path: '/home/searchList',
        query: {
          keyword: that.keyword
        }
      })
    },
    jumpTo (path) { // 路由跳转
      this.$router.push(path)
    }
  },
  components: {
    WxcLoading,
    NavBottom,
    Modal
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .space_between {
        justify-content: space-between;
    }
    .align_center {
        align-items: center;
    }
    .fs_24 {
        font-size: 24px;
    }
    .fs_28 {
        font-size: 28px;
    }
    .col_868686 {
        color: #868686;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .border_bottom_ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .margin_top_12 {
        margin-top: 12px;
    }
    .margin_right_24 {
        margin-right: 24px;
    }
    .home-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 24px;
        padding-right: 24px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        justify-content: space-between;
        align-items: center;
    }
    .input-wrapper {
        width: 624px;
        height: 60px;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 10px;
        background-color: #fff;
        align-items: center;
    }
    .search-icon {
        width: 30px;
        height: 30px;
        margin-left: 16px;
    }
    .tip-input {
        width: 546px;
        height: 60px;
        border-width: 0px;
        color: #464646;
        placeholder-color: #cecece;
        font-size: 24px;
    }
    .message {
        width: 42px;
        height: 42px;
    }
    .slider {
        width: 750px;
        height: 380px;
        margin-top: 86px;
    }
    .frame {
        width: 750px;
        height: 380px;
    }
    .banner {
        width: 750px;
        height: 380px;
    }
    .indicator {
        position: absolute;
        top: 160px;
        left: 0;
        width: 750px;
        height: 380px;
        item-color: rgba(138, 138, 138, 0.5);
        item-selected-color: rgba(43, 48, 64, 0.5);
        item-size: 16px;
    }
    .indicators {
        position: absolute;
        top: 115px;
        left: 0;
        width: 702px;
        height: 285px;
        item-color: #cecece;
        item-selected-color: rgba(43, 48, 64, 0.8);
        item-size: 16px;
    }
    .notice-wrapper {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .notice-title {
        font-size: 26px;
        font-family: bold;
        color: #868686;
    }
    .notice-content {
        width: 560px;
        margin-left: 24px;
        padding-left: 24px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #868686;
        font-size: 24px;
        font-family: medium;
        color: #464646;
        lines: 1;
    }
    .endSoon-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
    .endSoon-top {
        height: 88px;
        line-height: 88px;
        /*padding-top: 16px;*/
        /*padding-bottom: 16px;*/
    }
    .endSoon-title {
        font-family: bold;
        /*font-weight: bold;*/
        color: #262626;
    }
    .endSoon-item {
        overflow: hidden;
        width: 218px;
        flex-wrap: wrap;
    }
    .endSoon-image {
        width: 218px;
        height: 218px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .endSoon-content {
        width: 218px;
        padding-top: 8px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 8px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #ebebeb;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #ebebeb;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .endSoon-word {
        lines: 1;
        font-size: 24px;
        line-height: 56px;
        text-overflow: ellipsis;
        color: #464646;
    }
    .endSoon-number {
        font-size: 24px;
        /*color: #868686;*/
        line-height: 56px;
        color: #ff0f37;
    }
    .ad-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top:25px;
        background-color: #f5f5f5
    }
    .ad-image {
        flex: 1;
        height: 120px;
    }
    .popular-designer {
        width: 420px;
        height: 258px;
        border: 1px solid #ebebeb;
        border-radius: 10px;
    }
    .designer-image {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .designer-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-wrap: wrap;
        justify-content: center;
        background-color: rgba(46, 46, 46, 0.5);
        /*background-color: #000;*/
    }
    .popular-designer-image {
        width: 110px;
        height: 110px;
        margin-top: 30px;
        border-radius: 55px;
    }
    .popular-title {
        width: 418px;
        color: #fff;
        /*margin-top: 12px;*/
        font-size: 24px;
        line-height: 40px;
        font-family: bold;
        text-align: center;
    }
    .senior-designer {
        width: 258px;
        height: 118px;
        border-radius: 10px;
    }
    .designer-type {
        justify-content: space-between;
    }
    .designer-slider {
        width: 702px;
        height: 285px;
    }
    .designer-list {
        width: 702px;
        height: 285px;
        padding-top: 30px;
        justify-content: space-between;
    }
    .designer-item {
        width: 170px;
        flex-wrap: wrap;
    }
    .designer-avatar {
        width: 130px;
        height: 130px;
        margin-left: 20px;
        border-radius: 65px;
    }
    .designer-level {
        width: 170px;
        margin-top: 10px;
        font-family: medium;
        font-size: 22px;
        color: #868686;
        text-align: center;
    }
    .designer-name {
        width: 170px;
        lines: 1;
        margin-top: 16px;
        text-overflow: ellipsis;
        color: #464646;
        font-size: 24px;
        font-family: bold;
        text-align: center;
    }
    .bar {
        height: 22px;
        background-color: #f5f5f5;
    }
    .store-list {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .store-item {
        width: 218px;
        height: 218px;
        margin-bottom: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(235, 235, 235);
        border-radius: 10px
    }
</style>
